<template>
  <div id="sells" class="heightAll widthAll home">
    <top tar="sells"/>

    <div class="widthAll" style="margin-bottom: 20px;"> <!--搜索栏-->
      <!--input组件,有两个是js定义输入限制， clearable可清空-->
      <el-date-picker v-model="form.picker"
                      end-placeholder="结束日期"
                      range-separator="至"
                      start-placeholder="开始日期"
                      style="margin-right: 20px;"
                      type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
      <el-button icon="el-icon-back" type="primary" @click="returnHome">返回</el-button>
    </div>

    <el-table v-loading="loading" :data="sells" border class="el-table" header-align="center"
              highlight-current-row stripe style="width: 100%; text-align: center;">
      <ex-table-column :autoFit='true' label="销售编号" prop="id">
      </ex-table-column>
      <ex-table-column :autoFit='true' label="产品名称" prop="pid">
        <template slot-scope="scope">
          <!--一般来说，在table中加其他组件就需要 slot-scope-->
          <span>{{ productMap.get(scope.row.pid) }}</span>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="销售数量" prop="sellNumber">
      </ex-table-column>
      <ex-table-column :autoFit='true' label="销售价格" prop="sellPrice">
      </ex-table-column>
      <ex-table-column :autoFit='true' label="销售时间" prop="sellDate" width="200px">
        <template slot-scope="scope">
          <!--一般来说，在table中加其他组件就需要 slot-scope-->
          <i class="el-icon-time" style="margin-right: 8px;"></i>
          <span>{{ scope.row.sellDate }}</span>
        </template>
      </ex-table-column>
      <ex-table-column :autoFit='true' label="备注" prop="comment">
      </ex-table-column>
    </el-table>
    <br>
    <el-pagination :current-page="form.pageNo"
                   :page-size="form.pageSize"
                   :page-sizes="[5,10,15]"
                   :total="total"
                   background
                   class="my-changePage"
                   layout="total, sizes, prev, pager, next, jumper"
                   @current-change="change"
                   @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
import top from "../../components/backToTop";
import qs from "qs";

export default {
  name: "index",
  components: {
    top
  },
  data() {
    return {
      sells: [],
      productMap: new Map(),
      form: {
        pageNo: 1,
        pageSize: 5,
        picker: null,
        start: null,
        end: null,
      },
      total: 0,
      loading: true,
    }
  }, methods: {
    change(currentPage) {
      this.form.pageNo = currentPage;
      this.getSells();
    },
    handleSizeChange(size) {
      this.form.pageSize = size;
      this.getSells();
    },
    getSells() {
      const _this = this;
      if (_this.form.picker) {
        _this.form.start = _this.form.picker[0];
        _this.form.end = _this.form.picker[1];
      } else {
        _this.form.start = null;
        _this.form.end = null;
      }
      axios.post("/sell/getSells", qs.stringify(_this.form)).then(resp => {
        _this.sells = resp.data.message.records;
        _this.loading = false;
        _this.total = resp.data.message.total;
        _this.form.pageNo = resp.data.message.current;
        _this.sells.forEach(item => {
          if (!_this.productMap.get(item.pid)) {
            axios.post("/product/getProductById", qs.stringify({pid: item.pid})).then(rs => {
              _this.productMap.set(item.pid, rs.data.message.pname);
              _this.productMap = new Map(_this.productMap);
            })
          }
        })
      })
    }, search() {
      this.getSells();
    }, returnHome() {
      window.location.reload();
    }
  }, mounted() {
    this.getSells();
  }
}
</script>

<style scoped>

</style>